<template>
    <div class="app-container">
        <!-- <PageHeader :border="false" title="分管领导审批"/> -->
            <el-form ref="queryParamsRef" :inline="true" :model="queryParams">
                <el-row>
                    <el-col :span="8" v-if="activeTab == 'PoliceAppl'">
                        <el-form-item label="办案部门名称" label-width="100px">
                            <el-input v-model="queryParams.depname" clearable @change="getLists"
                            @keydown.enter.prevent="getLists" style="width:300px"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="activeTab == 'BAApply' || activeTab == 'ZZApply' || activeTab == 'ZJApply'">
                        <el-form-item label="办案部门名称" label-width="100px">
                            <el-input v-model="queryParamsApply.depname" clearable @change="getLists"
                            @keydown.enter.prevent="getLists" style="width:300px"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="activeTab == 'OrderPoliceApply'">
                        <el-form-item label="调警单位" label-width="100px">
                            <el-tree-select
                                v-model="queryParamsOrder.orderUnitId"
                                :data="UnitOptions"
                                default-expand-all
                                :props="{ value: 'id', label: 'label', children: 'children' }"
                                value-key="id"
                                placeholder="选择单位"
                                check-strictly
                                clearable
                                @change="getLists"
                                style="width:300px"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="activeTab == 'OrderPoliceApply'">
                        <el-form-item label="被调警单位" label-width="100px">
                            <el-tree-select
                                v-model="queryParamsOrder.fromUnitId"
                                :data="UnitOptions"
                                default-expand-all
                                :props="{ value: 'id', label: 'label', children: 'children' }"
                                value-key="id"
                                placeholder="选择单位"
                                check-strictly
                                clearable
                                @change="getLists"
                                style="width:300px"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="activeTab == 'OrderPoliceApply'">
                        <el-form-item label="调往单位" label-width="100px">
                            <el-tree-select
                                v-model="queryParamsOrder.toUnitId"
                                :data="UnitOptions"
                                default-expand-all
                                :props="{ value: 'id', label: 'label', children: 'children' }"
                                value-key="id"
                                placeholder="选择单位"
                                check-strictly
                                clearable
                                @change="getLists"
                                style="width:300px"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="时间起止" label-width="100px">
                            <el-date-picker
                                v-model="searchTime"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始时间"
                                end-placeholder="截止时间"
                                value-format="YYYY-MM-DD"
                                @change="changeDateTimerHandle"
                                style="width:300px"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="用警状态" prop="state" v-if="activeTab == 'PoliceAppl'" label-width="100px">
                            <el-select v-model="queryParams.state" clearable 
                            style="width:300px"
                                @change="getLists">
                                <el-option label="全部" value="99" key="99"/>
                                <el-option v-for="item in nj_policeapply_status" 
                                    :key="item.value" 
                                    :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="办案区使用申请状态" 
                        prop="state" 
                        label-width="140px" 
                        v-if="activeTab == 'BAApply' || activeTab == 'ZZApply' || activeTab == 'ZJApply'"
                        >
                            <el-select v-model="queryParamsApply.state" clearable 
                            style="width:300px"
                                @change="getLists">
                                <el-option label="全部" value="99" />
                                <el-option v-for="item in nj_apply_status" 
                                    :key="item.value" 
                                    :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="调警令状态" prop="state" label-width="100px" v-if="activeTab == 'OrderPoliceApply'">
                            <el-select v-model="queryParamsOrder.state" clearable 
                            style="width:300px"
                                @change="getLists">
                                <el-option label="全部" value="99" />
                                <el-option v-for="item in nj_orderpolice_status" 
                                    :key="item.value" 
                                    :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <el-button type="primary" @click="getLists">
                                <el-icon class="me-1">
                                    <Search/>
                                </el-icon>
                                查询
                            </el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="handleRest(queryParamsRef)">
                                <el-icon class="me-1">
                                    <Refresh/>
                                </el-icon>
                                重置
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-tabs type="border-card" v-model="activeTab" @tab-change="tabclick">
                <el-tab-pane name="PoliceAppl">
                    <template #label>
                        <el-badge v-if="depListTotalObj.policeApply > 0  && (queryParams.state == '99' || queryParams.state == '2' || queryParams.state == null)" 
                            :value="depListTotalObj.policeApply" 
                            class="item" 
                            :offset="[6, 2]">
                        用警申请
                        </el-badge>
                        <span v-else>用警申请</span>
                    </template>
                    <PoliceApplyLeader ref="PoliceApplLeaderRef" @backtotal="backtotals" />
                </el-tab-pane>
                <el-tab-pane name="BAApply">
                    <template #label>
                        <el-badge v-if="depListTotalObj.jwApplyCenter > 0 && (queryParamsApply.state == '99' || queryParamsApply.state == '2' || queryParamsApply.state == null)" 
                            :value="depListTotalObj.jwApplyCenter" 
                            class="item" 
                            :offset="[6, 2]">
                            办案中心使用申请
                        </el-badge>
                        <span v-else>办案中心使用申请</span>
                    </template>
                    <BAAApproveLeader ref="BAAApproveLeaderRef" @backtotal="backtotalsApply"  />
                </el-tab-pane>
                <el-tab-pane name="ZZApply">
                    <template #label>
                        <el-badge v-if="depListTotalObj.jwApplyArea > 0 && (queryParamsApply.state == '99' || queryParamsApply.state == '2' || queryParamsApply.state == null)" 
                            :value="depListTotalObj.jwApplyArea" 
                            class="item" 
                            :offset="[6, 2]">
                            自侦办案区使用申请
                        </el-badge>
                        <span v-else>自侦办案区使用申请</span>
                    </template>
                    <ZZApproveLeader ref="ZZApproveLeaderRef" @backtotal="backtotalsApply" />
                </el-tab-pane>
                <el-tab-pane name="ZJApply">
                    <template #label>
                        <el-badge v-if="depListTotalObj.jwApplyPlace > 0 && (queryParamsApply.state == '99' || queryParamsApply.state == '2' || queryParamsApply.state == null)" 
                            :value="depListTotalObj.jwApplyPlace" 
                            class="item" 
                            :offset="[6, 2]">
                            指定居所使用申请
                        </el-badge>
                        <span v-else>指定居所使用申请</span>
                    </template>
                    <ZJApproveLeader ref="ZJApproveLeaderRef" @backtotal="backtotalsApply" />
                </el-tab-pane>
                <el-tab-pane name="OrderPoliceApply">
                    <template #label>
                        <el-badge v-if="depListTotalObj.JwOrderPolice > 0 && (queryParamsOrder.state == '99' || queryParamsOrder.state == '1' || queryParamsOrder.state == null )" 
                            :value="depListTotalObj.JwOrderPolice" 
                            class="item" 
                            :offset="[6, 2]">
                            调警令
                        </el-badge>
                        <span v-else>调警令</span>
                    </template>
                    <OrderPoliceApproveLeader ref="OrderPoliceApproveLeaderRef" @backtotal="backtotalsOrder" />
                </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup>
import PageHeader from "@/components/PageHeader/index.vue";
import {getCurrentInstance} from "vue";
const {proxy} = getCurrentInstance();
import PoliceApplyLeader from "./PoliceApplyLeader/PoliceApplyLeader.vue";
import BAAApproveLeader from "./BAAApproveLeader/BAAApproveLeader.vue";
import ZZApproveLeader from "./ZZApproveLeader/ZZApproveLeader.vue";
import ZJApproveLeader from "./ZJApproveLeader/ZJApproveLeader.vue";
import OrderPoliceApproveLeader from "./OrderPoliceApproveLeader/OrderPoliceApprove.vue";
import {PoliceApplyleaderListTotal} from "@/api/UserPoliAppl/UserPoliAppl";
const { nj_policeapply_status,nj_apply_status ,nj_orderpolice_status} = proxy.useDict('nj_policeapply_status','nj_apply_status','nj_orderpolice_status')
import {deptTreeSelectPost} from "@/api/system/user.js";
const route = useRoute();
const UnitOptions = ref([])
const queryParamsRef = ref()

const PoliceApplLeaderRef = ref({})
const BAAApproveLeaderRef = ref({})
const ZZApproveLeaderRef = ref({})
const ZJApproveLeaderRef = ref({})
const depListTotalObj = ref({})
const OrderPoliceApproveLeaderRef = ref({})

const queryParams = ref({
    depname:'',
    state:null
})
const queryParamsApply = ref({
    depname:'',
    state:null
})
const queryParamsOrder = ref({
    state:null
})
const searchTime = ref([])
const activeTab = ref('PoliceAppl'); // 默认选中的tab

onMounted(() => {
    nextTick(() => {
        if (route.query.tag) {
        switch (Number(route.query.tag)) {
            case 1:
            activeTab.value = 'PoliceAppl'
            break;
        case 2:
            activeTab.value = 'BAApply'
            break;
        case 3:
            activeTab.value = 'ZZApply'
            break;
        case 4:
            activeTab.value = 'ZJApply'
            break;
        case 5:
            activeTab.value = 'OrderPoliceApply'
            break;
        default:
        ElMessage.error('索引无效');
      }
    } 
    getLists()
    getDeptTree()
    })
})
/** 查询部门下拉树结构 */
const getDeptTree = async () => {
    await deptTreeSelectPost({isUnit: true}).then(res => {
        UnitOptions.value  = res.data
    })
}
// 获取待办事宜标签
const getPoliceApplyleaderListTotals = async () => {
    await PoliceApplyleaderListTotal().then(res => {
        depListTotalObj.value = res.data
    })
}
// 获取调解室房间列表
const getLists = async () => {
    // getPoliceApplyleaderListTotals()
    tabclick(activeTab.value)
}
// 子组件返回的total-用警申请
const backtotals = async (value) => {
    console.log(queryParams.value)
    if( queryParams.value.state === '2'){
        depListTotalObj.value.policeApply = value 
    } else{
        getPoliceApplyleaderListTotals()
    }
}
// 子组件返回的total-办案中心使用申请
const backtotalsApply = async (value) => {
    console.log(queryParamsApply.value)
    if(queryParamsApply.value === '2'){
        if(activeTab.value == "BAApply"){
        depListTotalObj.value.jwApplyCenter = value
        }
        if(activeTab.value == "ZZApply"){
            depListTotalObj.value.jwApplyArea = value
        }
        if(activeTab.value == "ZJApply"){
            depListTotalObj.value.jwApplyPlace = value
        }
    }else{
        getPoliceApplyleaderListTotals()
    }
}
// 子组件返回的total-调警令
const backtotalsOrder = async (value) => {
    if( queryParamsOrder.value.state === '1'){
        depListTotalObj.value.JwOrderPolice = value
    } else{
        getPoliceApplyleaderListTotals()
    }
}
// tab 切换事件
const tabclick = (tab) => {
    if(tab == "PoliceAppl"){
        queryParamsApply.value.state = null
        queryParamsOrder.value.state = null
        PoliceApplLeaderRef.value.showPoliceApply(queryParams.value) 
    }
    if(tab == "BAApply"){
        queryParams.value.state = null
        queryParamsOrder.value.state = null
        BAAApproveLeaderRef.value.showBAAApply(queryParamsApply.value) 
    }
    if(tab == "ZZApply"){
        queryParams.value.state = null
        queryParamsOrder.value.state = null
        ZZApproveLeaderRef.value.showZZAprove(queryParamsApply.value) 
    }
    if(tab == "ZJApply"){
        queryParams.value.state = null
        queryParamsOrder.value.state = null
        ZJApproveLeaderRef.value.showZJAprove(queryParamsApply.value) 
    }
    if(tab == "OrderPoliceApply"){
        queryParams.value.state = null
        queryParamsApply.value.state = null
        queryParamsOrder.value.params = queryParams.value.params
        OrderPoliceApproveLeaderRef.value.showOrderPoliceApply(queryParamsOrder.value) 
    }
};
// 改变时间
const changeDateTimerHandle = (date) => {
    if (date) {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: date[0],
                endTime: date[1]
            }
        }
    } else {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: '',
                endTime: ''
            }
        }
    }
    // getLists()
    tabclick(activeTab.value)
}

// 重置搜索调解
const handleRest = (formEl) => {
    queryParams.value = {}
    queryParamsOrder.value = {}
    tabclick(activeTab.value)
}
</script>

<style scoped>
:deep() .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
    background-color: #44498f; /* 修改为你想要的红色 */
    color:white
}

:deep() .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
    background-color: #44498f; /* 修改为你想要的红色 */
    color:white
}
</style>